<template>
	<view class="page-container back-grey">
		<!-- 头部区域 -->
		<view class="pall-l back-primary head-box">
			<view v-if="order.status==0" class="row-box sb">
				<view class="col-box">
					<text class="white">待付款</text>
					<view class="row-box">
						<text class="s24 white mt-10">订单关闭时间：</text>
						<u-count-down :show-days="false" :show-hours="false" separator="zh"
							bg-color="transparent" color="#ffffff" separator-color="#ffffff" font-size="24" separator-size="24"
							:timestamp="orderCountdowntime" @end="orderEnd"
						>
						</u-count-down>
					</view>
				</view>
				<image class="head-icon" src="../static/wallet.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==1 && order.postageType==0" class="row-box sb">
				<view class="col-box">
					<text class="white">待自提</text>
					<text class="s24 white mt-10">自提时间：{{ order.pickUpTime }}</text>
				</view>
				<image class="head-icon" src="../static/voucher.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==1 && order.postageType!=0" class="row-box sb">
				<view class="col-box">
					<text class="white">待发货</text>
					<text class="s24 white mt-10">付款时间：{{ order.payTime }}</text>
				</view>
				<image class="head-icon" src="../static/voucher.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==2" class="row-box sb">
				<view class="col-box">
					<text class="white">商家已发货</text>
					<text v-if="order.sendTime" class="s24 white mt-10">发货时间：{{ order.sendTime }}</text>
				</view>
				<image class="head-icon" src="../static/truck.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==3" class="row-box sb">
				<view class="col-box">
					<text class="white">已收货</text>
					<text class="s24 white mt-10">等待您的评价</text>
				</view>
				<image class="head-icon" src="../static/comment-ed.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==4" class="row-box sb">
				<view class="col-box">
					<text class="white">已评价</text>
					<text class="s24 white mt-10">感谢您的评价</text>
				</view>
				<image class="head-icon" src="../static/comment-ed.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==6" class="row-box sb">
				<view class="col-box">
					<text class="white">订单已关闭</text>
				</view>
				<image class="head-icon" src="../static/cancel.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==7" class="row-box sb">
				<view class="col-box">
					<text class="white">换货申请中</text>
					<text class="s24 white mt-10">等待商家查看</text>
				</view>
				<image class="head-icon" src="../static/voucher.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==8" class="row-box sb">
				<view class="col-box">
					<text class="white">售后完成</text>
					<!-- <text class="s24 white mt-10">等待商家查看</text> -->
				</view>
				<image class="head-icon" src="../static/voucher-ed.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==9" class="row-box sb">
				<view class="col-box">
					<text class="white">商家同意换货</text>
					<text class="s24 white mt-10">请上传物流信息</text>
				</view>
				<image class="head-icon" src="../static/truck.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==12" class="row-box sb">
				<view class="col-box">
					<text class="white">换货中</text>
					<text class="s24 white mt-10">请等待商家重新发货</text>
				</view>
				<image class="head-icon" src="../static/truck.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==10" class="row-box sb">
				<view class="col-box">
					<text class="white">商家拒绝换货</text>
					<text class="s24 white mt-10">拒绝原因：{{ order.aftersales.refuseReason }}</text>
				</view>
				<image class="head-icon" src="../static/cancel.png" mode="aspectFill"></image>
			</view>
			<view v-else-if="order.status==11" class="row-box sb">
				<view class="col-box">
					<text class="white">退款已完成</text>
					<!-- <text class="s24 white mt-10">等待商家查看</text> -->
				</view>
				<image class="head-icon" src="../static/wallet-ed.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 订单地址区域 -->
		<view class="back-white mb-base">
			<!-- 自提 -->
			<view v-if="order.postageType==0" class="row-box sb pall-l">
				<view class="col-box">
					<text class="s24 mb-4">自提地址</text>
					<text class="s24 grey-light">{{ order.address }}</text>
				</view>
				<u-icon name="daohang" custom-prefix="custom-icon" :color="primaryColor" :size="48"
					label="导航" label-size="24" label-pos="bottom" :label-color="primaryColor" margin-top="10" @click="clickNavigation()">
				</u-icon>
			</view>
			<!-- 配送 -->
			<view v-else class="prow-l">
				<!-- 汽运、空运 -->
				<view v-if="order.image" class="row-box pcol-l">
					<view class="row-box mr-base">
						<image class="icon48 mr-l" src="../static/transport.png" mode="aspectFill"></image>
						<text class="s24">发货凭证</text>
					</view>
					<view class="row-box">
						<image v-for="(item, index) in order.image.split(',')" :key="index" :src="item" mode="aspectFill" style="width: 108rpx;height: 108rpx;" class="radius-base mr-base" @click="previewImage(index, order.image.split(','))"></image>
					</view>
				</view>
				<!-- 快递 -->
				<view v-else-if="order.logisticCode" class="row-box sb pcol-l">
					<view class="row-box">
						<image class="icon48 mr-l" src="../static/transport.png" mode="aspectFill"></image>
						<text class="s24">{{ order.shipperName }}：{{ order.logisticCode }}</text>
					</view>
					<view class="copy" @click="copy(order.logisticCode)">复制</view>
				</view>
				<!-- 收件地址 -->
				<view class="row-box start pcol-l">
					<image class="icon48 mr-l" src="../static/address.png" mode="aspectFill"></image>
					<view class="col-box">
						<text class="s24 mb-4">{{ order.userExpressName }} {{ order.userExpressPhone }}</text>
						<text class="s24 grey-light">{{ order.userExpressAddress }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 宠物详情 -->
		<view class="prow-l pcol-s back-white mb-base">
			<cd-petcard-order :pet="orderPet" :showAvatar="true"></cd-petcard-order>
			<view class="line"></view>
			<!-- 运费 -->
			<view v-if="order.postageType!=0" class="row-box sb mt-10">
				<text class="s24">运费</text>
				<text class="s20 grey-light">￥{{ moneyFormat(order.postage) }}</text>
			</view>
			<!-- 平台担保期 -->
			<view class="row-box sb mt-10">
				<text class="s24">平台担保期：{{ deliveryTimeFormat(order.ct, 'yyyy-MM-dd') }}至{{ getSpecialTime(deliveryTimeFormat(order.ct, 'yyyy-MM-dd'), 6) }}</text>
				<text class="s20 grey-light">￥0.00</text>
			</view>
		</view>
	
		<!-- 核销二维码 -->
		<view v-if="order.status==1 && order.postageType==0" class="row-box center back-white mb-base" style="height: 348rpx;">
			<view class="col-box center">
				<text class="s32 mb-l">核销二维码</text>
				<canvas canvas-id="qrcode" style="width: 200rpx;height: 200rpx;"></canvas>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="prow-l back-white mb-base">
			<view class="row-box h-80">
				<text class="s28">订单信息</text>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">订单编号：</text>
				<text class="s24 grey-light">{{ order.merOrderNo }}</text>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">创建时间：</text>
				<text class="s24 grey-light">{{ order.ct }}</text>
			</view>
			<view v-if="order.payTime" class="row-box sb h-80">
				<text class="s24">支付时间：</text>
				<text class="s24 grey-light">{{ order.payTime }}</text>
			</view>
			<view v-if="order.sendTime" class="row-box sb h-80">
				<text class="s24">发货时间：</text>
				<text class="s24 grey-light">{{ order.sendTime }}</text>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">平台担保：</text>
				<u-icon class="pcol-base" name="arrow-right" color="#999999" size="20" :bold="true"
					label="《宠都平台买方担保协议》" label-size="24" label-pos="left" label-color="#999999" margin-right="10" @click="gotoWeb(url)">
				</u-icon>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">举报商家：</text>
				<u-icon class="pcol-base" name="arrow-right" color="#999999" size="20" :bold="true"
					label="去举报" label-size="24" label-pos="left" label-color="#999999" margin-right="10" @click="goReport(order.merchantId, 7)">
				</u-icon>
			</view>
		</view>
		
		<!-- 换货信息 -->
		<view v-if="order.aftersales" class="prow-l back-white mb-base">
			<view class="row-box h-80">
				<text class="s28">订单信息</text>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">换货原因：</text>
				<text class="s24 grey-light">{{ order.aftersales.reasonName }}</text>
			</view>
			<view class="row-box sb h-80">
				<text class="s24">换货描述：</text>
				<text class="s24 grey-light">{{ order.aftersales.description }}</text>
			</view>
			<view class="row-box" style="padding-bottom: 20rpx;">
				<image v-for="(item, index) in order.aftersales.images.split(',')" :key="index" :src="item" mode="aspectFill" style="width: 108rpx;height: 108rpx;" class="radius-base mr-base" @click="previewImage(index, order.aftersales.images.split(','))"></image>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="button-area prow-l back-white">
			<!-- 待付款 -->
			<view v-if="order.status==0" class="button primary">立即付款</view>
			<view v-if="order.status==0" class="button">取消订单</view>
			
			<!-- 已付款待发货 -->
			<view v-if="order.status==1" class="button primary" @click="refundAll(order.merOrderNo)">申请退款</view>
			
			<!-- 已发货待收货 -->
			<view v-if="order.status==2" class="button primary" @click="manageOrder(order.merOrderNo, 2, 'detail')">确认收货</view>
			
			<!-- 商家同意换货 -->
			<view v-if="order.status==9" class="button primary" @click="goAftersaleExpress(order.merOrderNo, orderPet, order.aftersales.id)">上传物流</view>
			
			<!-- 已付款待发货 已发货待收货 换货申请中 商家同意换货 商家拒绝换货 用户已发货（换货中） -->
			<view v-if="order.status==1 || order.status==2 || order.status==7 || order.status==9 || order.status==10 || order.status==12" class="button" @click="goChat(order.userId, order.userName)">联系商家</view>
			
			<!-- 已发货待收货 -->
			<view v-if="order.status==2" class="button" @click="goAftersaleApply(order.merOrderNo, orderPet)">申请换货</view>
			
			<!-- 待评价 -->
			<view v-if="order.status==3" class="button primary" @click="goReview(order.merOrderNo, orderPet, order.merchantId)">去评价</view>
			
			<!-- 已评价 -->
			<view v-if="order.status==4" class="button primary" @click="goReview(order.merOrderNo, orderPet, order.merchantId)">查看评价</view>
			
			<!-- 已评价 已取消 退款完成 售后完成 -->
			<view v-if="order.status==4 || order.status==6 || order.status==8 || order.status==11" class="button" @click="manageOrder(order.merOrderNo, 3, 'detail')">删除订单</view>
			
			<!-- 换货申请中 商家拒绝换货 用户已发货（换货中） -->
			<view v-if="order.status==7 || order.status==10 || order.status==12" class="button" @click="openWxKf()">联系客服</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import mixinOrder from "@/common/mixin_order.js"
	import UQRCode from "@/utils/uqrcode.js"
	export default {
		mixins: [mixinOrder], // 混入订单通用
		data() {
			return {
				merOrderNo: '', // 订单编号
				order: {}, // 订单详情
				url: 'https://www.chongdu.com/h5/agreement/gmfxy.html'
			};
		},
		computed: {
			...mapState('m_user', ['openid']),
			
			// 订单倒计时秒数
			orderCountdowntime() {
				if (!this.order.ct) return 0
				// 15分钟时间戳
				let orderTime = 15 * 60 * 1000
				// 现在时间戳
				let now = new Date()
				now = Date.parse(now)
				// 订单开始时间戳
				let start = Date.parse(this.order.ct)
				return (start + orderTime - now) / 1000
			},
			
			// 订单宠物
			orderPet() {
				if (!this.order.item) return {}
				return {
					merchantId: this.order.merchantId,
					merchantName: this.order.userName,
					merchantIcon: this.order.userIcon,
					petIcon: this.order.item.icon,
					title: this.order.item.title,
					sex: this.order.item.sex,
					birthday: this.order.item.birthday,
					vaccineCount: this.order.item.vaccineCount,
					killWormCount: this.order.item.killWormCount,
					isSterilization: this.order.item.isSterilization,
					price: this.order.price,
					currentPrice: this.order.currentPrice,
					payPrice: this.order.payPrice
				}
			}
		},
		onLoad(options) {
			this.merOrderNo = options.id
			// 获取订单详情
			this.getOrderDetail()
		},
		onPullDownRefresh() {
			// 获取订单详情
			this.getOrderDetail()
		},
		methods: {
			// ---------- 用户操作
			// 点击导航图标
			clickNavigation() {
				uni.openLocation({
					longitude: Number(this.order.longitude),
					latitude: Number(this.order.latitude),
					name: this.order.userName,
					address: this.order.address,
					success: (res) => {
						console.log('uni.openLocation-success', res)
					},
					fail: (err) => {
						console.log('uni.openLocation-fail', err)
					}
				})
			},
			// 订单待支付时间结束
			orderEnd() {
				uni.showModal({
					content: '订单已关闭！',
					confirmColor: this.primaryColor,
					showCancel: false,
					success: () => {
						
					},
					complete: () => {
						uni.navigateBack()
					}
				})
			},
			// 复制
			copy(text) {
				// 设置系统剪贴板的内容
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功！'
						})
					}
				})
			},
			// ----------
			
			// ---------- 获取数据
			// 获取订单详情
			getOrderDetail() {
				this.$api.GetOrderDetail({
					orderNo: this.merOrderNo,
					queryType: 0
				}).then(res => {
					console.log('getOrderDetail-success', res)
					if (res.data.code == 200) {
						this.order = res.data.data
						if (this.order.status==1 && this.order.postageType==0) {
							// 创建json对象
							let obj = {"orderNo": this.merOrderNo,"userId": this.order.buyUserId}
							// json对象转字符串,生成二维码
							this.getQrcode(JSON.stringify(obj))
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 200)
							}
						})
					}
				}).catch(err => {
					console.log('getOrderDetail-fail', err)
					uni.navigateBack()
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			// ----------
			
			// ---------- 数据处理
			// 用字符串生成二维码
			getQrcode(text) {
				// 获取uQRCode实例
				var qr = new UQRCode()
				// 设置二维码内容
				qr.data = text
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 100
				// 调用制作二维码方法
				qr.make()
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas()
			},
			// ----------
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 104rpx;
	}
	// 通用
	.mb-4 {
		margin-bottom: 4rpx;
	}
	.h-80 {
		height: 80rpx;
	}
	// 头部
	.head-box {
		height: 204rpx;
		.head-icon {
			width: 144rpx;
			height: 144rpx;
		}
	}
	// 复制按钮
	.copy {
		width: 130rpx;
		height: 52rpx;
		border-radius: $uni-border-radius-l;
		background: $uni-color-primary;
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		color: $uni-text-color-inverse;
	}
	// 分割线
	.line {
		width: 100%;
		height: 1rpx;
		background: #f5f5f5;
	}
	// 底部按钮区域
	.button-area {
		width: 100vw;
		height: 104rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, 164rpx);
		direction: rtl;
		column-gap: 24rpx;
		align-items: center;
		.button {
			width: 100%;
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 24rpx;
			border: 1rpx solid #bababa;
			color: #333333;
			&.primary {
				border: 1rpx solid $uni-color-primary;
				color: $uni-color-primary;
			}
		}
	}
</style>
